<template>
  <div class="nav_menu">
    <div
      v-for="(item , index) in listData"
      :class="item.url==activeIndex?'fl active':'fl'"
      :key="index"
      @click="selectChange(item.url)"
    >
      <span>{{item.name}}</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeIndex: ""
    };
  },
  mounted() {
    console.log(localStorage.getItem("menuKey"))
    if (localStorage.getItem("menuKey")) {
      this.activeIndex = localStorage.getItem("menuKey");
    }
  },
  watch: {
    '$route.name'() {
      this.activeIndex = this.$route.name
    },
    listData: {
      handler(newData) {
        if (newData.length != 0 && newData[0]) {
          if (localStorage.getItem("menuKey")) {
            this.activeIndex = localStorage.getItem("menuKey");
            this.$router.push({
              name: this.activeIndex
            });
          } else if (newData[0].list) {
            this.activeIndex = newData[0].list[0].url;
          } else {
            this.activeIndex = newData[0].url;
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    selectChange(key) {
      this.activeIndex = key;
      localStorage.setItem("menuKey", key);
      this.$router.push({ name: key });
    }
  },
  // destroyed() {
  //   localStorage.removeItem("menuKey");
  // },
  props: ["listData"]
};
</script>

<style lang="less" scoped>
.nav_menu {
  color: #ebeef5;
  width: 100%;
  height: 100%;
  font-size: 14px;
}
.nav_menu > div {
  width: 90px;
  height: 35px;
  line-height: 35px;
  margin-left: 20px;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.nav_menu > div:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // background: url("../../assets/img/topNav_menu_bg.png") center no-repeat;
  // background-size: 100% 100%;
}

.nav_menu > div.active {
  background: rgba($color: #1a707a, $alpha: 0.5);
}
.nav_menu > div span {
  position: relative;
  z-index: 5;
}
</style>
